<template>
  <div class="w-full px-2 flex flex-row justify-between item-center" style="border-bottom: 1px solid var(--border)">
    <div class="flex flex-row gap-2 items-center justify-center text-xl font-medium">
      {{ chat.ChatObject?.name || "" }}
      <UserStatus v-if="chat.ChatObject?.chatType == ChatType.friend" :status="GetUserStatus" />
    </div>
    <div class="flex flex-row gap-6 cursor-pointer p-2">
      <!-- 暂时未作群视频通话 -->
      <div v-if="chat.ChatObject?.chatType != ChatType.group" class="flex flex-row gap-4">
        <CallOutline class="HeaderIcon" @click="SendCallMessage('voiceCall', MessageType.voiceCall)" />
        <VideocamOutline class="HeaderIcon" @click="SendCallMessage('videoCall', MessageType.videoCall)" />
      </div>
      <!-- 打开详情 -->
      <EllipsisHorizontal class="HeaderIcon" @click="drawer = true" />
    </div>
  </div>
  <n-drawer v-model:show="drawer" :auto-focus="false" :width="302" style="background-color: var(--bg-center)">
    <div class="w-full h-full flex flex-col gap-2">
      <component :is="RenderPage"></component>
    </div>
  </n-drawer>
</template>

<script lang="ts" setup>
import { computed, h, ref } from "vue";
import { CallStatus } from "@/types/call.ts";
import { FriendStatus } from "@/types/friend.ts";
import { ChatType, MessageType, TacticMessageType } from "@/types/chat.ts";
import { useChat } from "@/store/modules/chat.ts";
import { useUser } from "@/store/modules/user.ts";
import { useCache } from "@/store/modules/cache.ts";
import { MessageStrategyMap } from "@/tactics/message.ts";
import { NDrawer } from "naive-ui";
import FriendSideCard from "./FriendSideCard.vue";
import GroupSideCard from "./GroupSideCard.vue";
import UserStatus from "@/components/UserStatus/index.vue";
import { CallOutline, EllipsisHorizontal, VideocamOutline } from "@vicons/ionicons5";

const cache = useCache();
const user = useUser();
const chat = useChat();
let drawer = ref<boolean>(false);

// 根据chatType生成不同的详情页
const RenderPage = computed(() => {
  if (!chat.ChatObject) return h("div");
  switch (chat.ChatObject.chatType) {
    case ChatType.friend:
      return h(FriendSideCard, { closeDetail: () => (drawer.value = false) });
    case ChatType.group:
      return h(GroupSideCard, { closeDetail: () => (drawer.value = false) });
    default:
      return h("div");
  }
});
// 查询当前用户状态
const GetUserStatus = computed<FriendStatus>(() => {
  if (!chat.ChatObject || !cache.FriendListCache) return FriendStatus.off;
  const userId = chat.ChatObject.id;
  const friendInfo = cache.FriendListCache.find((f) => f.id === userId);
  return friendInfo?.status ?? FriendStatus.off;
});

// 发送通话请求
function SendCallMessage(RoutePath: string, messageType: TacticMessageType) {
  if (!chat.ChatObject) return;
  const strategy = MessageStrategyMap[messageType];
  let message = strategy.mergeChatObj({
    callStatus: CallStatus.wait,
  });
  strategy.sendMessage(message);
  const size = messageType === MessageType.voiceCall ? { width: 350, height: 550 } : { width: 900, height: 650 };
  window.electronApi.createWindow({ path: BuildPath(RoutePath, messageType), title: RoutePath, ...size });
}

// 构建路径地址
function BuildPath(RoutePath: string, messageType: TacticMessageType): string {
  if (!chat.ChatObject) return "";
  // TODO:只使用私聊 后续 我们要拿到选择的群成员
  const { chatType, sessionId, id, avatar, name } = chat.ChatObject;
  return (
    RoutePath +
    "?requestParams=" +
    encodeURIComponent(
      JSON.stringify({
        chatType,
        messageType,
        sessionId,
        isCall: false,
        initiatorId: user.userId,
        callCandidateLists: [{ name, avatar, id }],
      }),
    )
  );
}
</script>

<style lang="scss" scoped>
.HeaderIcon {
  width: 20px;
  height: 20px;
}
</style>
